<template>

    <div class="update-photo">
    <img class="img" :src="img" ref='img' />

    <div class="toolbar">
      <div class="cancel" @click="$emit('close')">取消</div>
      <div class="confirm" @click="onConfirm">完成</div>
    </div>
  </div>

</template>

<script>
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'
// import { setPhoto } from '../../../api/user'
export default {
    name: 'updateImage',
    props: {
        img: {
            required: true,
            type: [Object, String]
        }
    },
    data () {
        return {
            cropper: null
        }
    },
    created () {

    },
    mounted () {
        const image = this.$refs.img
        this.cropper = new Cropper(image, {
            viewMode: 1,
            dragMode: 'move',
            aspectRatio: 1,
            autoCropArea: 1,
            cropBoxMovable: false,
            cropBoxResizable: false,
            background: false,
            movable: true
        })
    },
    methods: {
        onConfirm () {
            try {
                this.$toast.loading({
                    message: '修改中',
                    forbidClick: true,
                    duration: 0
                })
                // this.cropper.getCroppedCanvas().toBlob(async blob => {
                //     // const formData = new FormData()
                //     // formData.append('photo', blob)
                //     // const { data: { data } } = await setPhoto(formData)
                //     // this.$emit('updatePhoto', data.photo)
                //     // console.log(blob);
                // this.$toast.success('更新成功')
                // this.$emit('close')
                // })
                const data = this.cropper.getCroppedCanvas().toDataURL('image/jpeg')
                this.$emit('img', data)
                this.$toast.success('更新成功')
                this.$emit('close')
            } catch (err) {
                this.$toast.fail('更新失败')
            }
        }
    }
}
</script>

<style scoped lang="scss">
img{
  display: block;
  max-width: 100%;
}
.update-photo {
  background-color: #000;
  height: 100%;
  .toolbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    .cancel,
    .confirm {
      width: 90px;
      height: 90px;
      font-size: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
    }
  }
}
</style>
